<template>
    <span :class="[titleClass, txtColor, 'num-box']" :title="`${prefix}${scientificToDecimal(num)}${suffix}`">
        <span v-if="prefix && num != 0 && num != null">{{ prefix }}</span>
        <span v-if="isZeroMore">
            <span>{{ numStr }}</span>
            <span v-if="suffix">{{ suffix }}</span>
        </span>
        <span v-if="!isZeroMore && num != 0 && num != null">
            <span>0.0</span>
            <span :class="[subTitleClass, txtColor]">{{ zeroNum }}</span>
            <span>{{ numNot }}</span>
            <span v-if="suffix">{{ suffix }}</span>
        </span>
        <span v-if="num == 0 || num == null">
            <span>-</span>
        </span>
    </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { formatBigNumber, numberWithCommas, scientificToDecimal } from "@/comm/format";

const numStr = computed(() => {
    return numberWithCommas(props.num, 6)
});
const numNot = computed(() => {
    const { decimalPart, zeroCount } = processNumber(props.num)
    const not = decimalPart + ''
    return not.substring(0, props.subZero)
})
const txtColor = computed(() => {
    if (props.isColor) {
        if (props.num == 0) {
            return "normal-color";
        }
        if (props.num < 0) {
            return "lose-color";
        }
        if (props.num > 0) {
            return "win-color";
        }
        return "lose-color";
    }
    return "";
});
const isZeroMore = computed(() => {
    const num = +props.num
    if (num < 0.0001) {
        return false
    } else {
        return true
    }
})
const zeroNum = computed(() => {
    const { decimalPart, zeroCount } = processNumber(props.num)
    return zeroCount
})
function processNumber(num: any) {
    const a = scientificToDecimal(num)
    const decimal = String(a).split(".")[1];
    let zeroIndex: number | string = 0;
    let decimalPart: number | string = 0
    let zeroCount: number | string = 0;
    if (decimal) {
        for (let i = 0; i < decimal.length; i++) {
            if (decimal[i] === "0") {
                zeroCount++;
            } else {
                break;
            }
        }
        zeroIndex = decimal.search(/[^0]/);
        decimalPart = decimal.slice(zeroIndex)
        return { decimalPart, zeroCount };
    }
    return { decimalPart, zeroCount };
}

const props = defineProps({
    num: {
        default: 0
    },
    /**前面加字符串 */
    prefix: {
        type: String,
        default: ""
    },
    /**后面加字符串 */
    suffix: {
        type: String,
        default: ""
    },
    titleClass: {
        type: String,
        default: 'title-4'
    },
    subTitleClass: {
        type: String,
        default: 'num-zero'
    },
    isColor: {
        type: Boolean,
        default: false
    },
    // 0之后截取多少位小数显示
    subZero: {
        type: Number,
        default: 4,
    }
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
